<template>
	<view class="list">
		<my-goods @click.native="toDetail(item.goods_id)" :item="item" v-for="(item, index) in goodsList" :key="index">
		</my-goods>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 定义商品列表数据
				goodsList: [],
				// 搜索关键字
				query: '',
				// 当前页
				pagenum: 1,
				// 页容量
				pagesize: 10,
				// 总数
				total: 0,
				// 判断是否存在发请求
				isLoading: false,
				// 判断数据是否加载完毕
				finished: false
			};
		},
		onLoad(options) {
			// 接收关键字
			this.query = options.key
			// 请求服务器得到商品列表
			this.getGoodsList()
		},
		onReachBottom() {
			// 判断是否在请求
			if (this.isLoading) return
			// 判断数据是否加载完毕
			if (this.finished) return uni.showToast({
				title: '数据加载完毕...'
			})
			// 页码 ++
			this.pagenum += 1
			// 请求下一页的数据
			this.getGoodsList()
		},
		// 下拉刷新时会触发
		onPullDownRefresh() {
			// 重置数据
			this.goodsList = []
			this.pagenum = 1
			this.total = 0
			this.isLoading = false
			this.finished = false
			// 重新获取数据
			this.getGoodsList(true)
		},
		methods: {
			// 发请求得到商品列表
			async getGoodsList(bool) {
				// 将请求状态设置为 rrue
				this.isLoading = true
				let {
					data: res
				} = await uni.$http.get('/api/public/v1/goods/search', {
					query: this.query,
					pagenum: this.pagenum,
					pagesize: this.pagesize
				})
				if (res.meta.status !== 200) return uni.$showMsg()
				// console.log(res)
				this.goodsList = [...this.goodsList, ...res.message.goods]
				this.total = res.message.total
				// 将请求状态设置为 false
				this.isLoading = false
				// 判断是否是下拉
				if (bool) {
					// 关闭下拉面板
					uni.stopPullDownRefresh()
				}
				// 判断数据是否请求完毕
				if (this.goodsList.length === this.total) {
					this.finished = true
				}
			},
			// 跳转到商品详情
			toDetail(goods_id) {
				uni.navigateTo({
					url: `/pages/goods_detail/main?goods_id=${goods_id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.list {}
</style>
